 <template>
  <el-container class="h-screen bg-gray-100 dark:bg-gray-800">
    <el-header class="flex items-center justify-between bg-white dark:bg-gray-900">
      <h1 class="dashboard-title text-xl font-bold">系统监控面板</h1>
      <el-switch
        v-model="themeStore.isDark"
        inline-prompt
        active-icon="Moon"
        inactive-icon="Sunny"
        @change="themeStore.toggleTheme"
      />
    </el-header>
    <el-main class="p-4">
      <el-row :gutter="20">
        <!-- CPU 监控卡片 -->
        <el-col :xs="24" :sm="12" :md="8" :lg="6">
          <CpuCard :data="cpuInfo" :loading="loading" />
        </el-col>
        <!-- 内存监控卡片 -->
        <el-col :xs="24" :sm="12" :md="8" :lg="6">
          <MemoryCard :data="memInfo" :loading="loading" />
        </el-col>
        <!-- JVM 监控卡片 -->
        <el-col :xs="24" :sm="12" :md="8" :lg="6">
          <JvmCard :data="jvmInfo" :loading="loading" />
        </el-col>
        <!-- 系统信息卡片 -->
        <el-col :xs="24" :sm="24" :md="24" :lg="6">
          <SysInfoCard :data="sysInfo" :loading="loading" />
        </el-col>
        <!-- 磁盘监控卡片 -->
        <el-col :xs="24">
          <DiskCard :data="diskInfo" :loading="loading" />
        </el-col>
      </el-row>
    </el-main>
  </el-container>
</template>

<script setup lang="ts">
import { ref, onMounted, onUnmounted } from "vue";
import { useThemeStore } from "@/store/theme";
import { getSystemInfo, getCpuInfo, getMemInfo, getJvmInfo, getSysInfo, getSysFileInfo } from "@/api/monitor";
import CpuCard from "@/components/dashboard/CpuCard.vue";
import MemoryCard from "@/components/dashboard/MemoryCard.vue";
import JvmCard from "@/components/dashboard/JvmCard.vue";
import SysInfoCard from "@/components/dashboard/SysInfoCard.vue";
import DiskCard from "@/components/dashboard/DiskCard.vue";
import type { GetCpuInfoRes, GetJvmInfoRes, GetMemInfoRes, GetSysFileInfoRes, GetSysInfoRes } from "@/api/monitor/types";

const themeStore = useThemeStore();
const loading = ref(true);
const cpuInfo = ref<GetCpuInfoRes>({} as GetCpuInfoRes);
const memInfo = ref<GetMemInfoRes>({} as GetMemInfoRes);
const jvmInfo = ref<GetJvmInfoRes>({} as GetJvmInfoRes);
const sysInfo = ref<GetSysInfoRes>({} as GetSysInfoRes);
const diskInfo = ref<GetSysFileInfoRes[]>([] as GetSysFileInfoRes[]);

// 初始化数据
const fetchData = async () => {
  try {
    const [all, cpu, mem, jvm, sys, disk] = await Promise.all([
      getSystemInfo(),
      getCpuInfo(),
      getMemInfo(),
      getJvmInfo(),
      getSysInfo(),
      getSysFileInfo()
    ]);
    cpuInfo.value = all.cpu || cpu;
    memInfo.value = all.memory || mem;
    jvmInfo.value = all.jvm || jvm;
    sysInfo.value = all.system || sys;
    diskInfo.value = all.files || disk;
  } catch (error) {
    console.error("数据获取失败", error);
  } finally {
    loading.value = false;
  }
};

// 定时刷新（每5秒）
let timer: number;
onMounted(() => {
  fetchData();
  timer = setInterval(fetchData, 5000);
});
onUnmounted(() => clearInterval(timer));
</script>